<template>
	<view class="mediation-container">
		<view class="form-box">
			<view class="title d-flex align-items-center">申请人信息</view>
			<basisForm ref="load1"></basisForm>
		</view>
		<view class="form-box">
			<view class="title d-flex align-items-center">被申请人信息</view>
			<basisForm ref="load2"></basisForm>
		</view>
		<view class="textarea-box">
			<view class="title">请求事项</view>
			<view class="textarea">
				<textarea maxlength="-1" placeholder="请输入" />
			</view>
		</view>
		<view class="textarea-box">
			<view class="title">请求事项</view>
			<view class="tips">申请人与被申请人在继承</view>
			<view class="textarea h-460">
				<textarea maxlength="-1" placeholder="请输入" />
			</view>
			<view class="desc">
				遗产中发生纠纷，双方因对其遗产分配和遗嘱的继承发生分歧，不能自行和解。为避免伤害彼此感情，维护家族和睦，现申请对我们之间的纠纷进行调解。我们双方将自觉遵守调解纪律，自觉履行调解协议，并按规定缴纳调解费，希望调解单位尽快组织我们进入调解程序。
			</view>
			<view class="d-flex mt-20 ml-8 mr-8">
				<view class="autograph-text">申请人（签字）：</view>
				<image class="autograph-img" src="../../static/images/certificate/img_4.png" mode=""></image>
			</view>
			<view class="d-flex justify-content-between mt-16 mb-10">
				<button class="sign">签字</button>
				<button class="notice">签署调解告知书</button>
			</view>
		</view>
		<view style="height: 150rpx;"></view>
		<view class="bottom-box">
			<button> 提交申请</button>
		</view>
	</view>
</template>

<script>
	import basisForm from '@/components/basisForm.vue'
	export default {
		components: {
			basisForm
		},
		data() {
			return {}
		},
		onLoad() {},
		mounted() {
			this.$refs.load1.getData()
			this.$refs.load2.getData()
		},
		methods: {
			changeHandler(e) {
				if (e.detail.column == 0) {
					this.cityIndex = e.detail.value
				}
				if (e.detail.column == 1) {
					this.areaIndex = e.detail.value
				}
				let columnIndex = e.detail.column
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					this.columns[1] = this.city[this.cityIndex]
					this.columns[2] = this.area[this.cityIndex][0]
				} else if (columnIndex === 1) {
					this.columns[2] = this.area[this.cityIndex][this.areaIndex]
				}
			},
			bindPickerChange: function(e) {
				this.index = e.detail.value
				this.formData.relationship = this.array[e.detail.value]
			},

			bindMultiChange(e) {
				// this.formData.nationality = this.countrydata[]
			},

			bindDateChange(e) { //选择出生日期
				this.formData.birthDate = e.detail.value
			},

			bindFamilyChange(e) {
				this.formData.nameFamily = this.familydata[e.detail.value]
			},
			handleAddrConfirm(e) {
				this.formData1.addr = this.columns[0][e.detail.value[0]].label + ' ' + this.columns[1][e.detail.value[1]]
					.label +
					' ' + this.columns[2][e.detail.value[2]].label
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
	}

	.mediation-container {
		line-height: 1;

		.form-box {
			width: 706rpx;
			background-color: #fff;
			margin: 15rpx auto 0;
			border-radius: 20rpx;

			.title {
				font-size: 30rpx;
				font-weight: 500;
				height: 82rpx;
				color: #333333;
				border-bottom: 1rpx solid #F6F6F6;
				margin: 0 20rpx;
			}

		}

		.textarea-box {
			width: 706rpx;
			background-color: #fff;
			margin: 15rpx auto 0;
			border-radius: 20rpx;
			overflow: hidden;

			.title {
				margin-top: 34rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: #333333;
				margin-left: 30rpx;
			}

			.tips {
				font-size: 24rpx;
				font-weight: 500;
				color: #999999;
				margin-left: 30rpx;
				margin-top: 12rpx;
			}

			.desc {
				font-size: 26rpx;
				font-weight: 500;
				color: #666666;
				line-height: 47rpx;
				margin-left: 30rpx;
				margin-top: 42rpx;
			}

			.autograph-text {
				font-size: 26rpx;
				font-weight: 500;
				color: #333333
			}

			.autograph-img {
				width: 300rpx;
				height: 150rpx;
			}

			.h-460 {
				height: 460rpx !important;

				textarea {
					height: 400rpx !important;
				}
			}

			view.textarea {
				width: 640rpx;
				height: 236rpx;
				background: #F6F6F6;
				border-radius: 15rpx;
				margin: 20rpx auto;
				overflow: hidden;

				textarea {
					background: #F6F6F6;
				}

				uni-textarea {
					margin: 20rpx auto;
				}
			}

			.sign,
			.notice {
				width: 251rpx;
				height: 80rpx;
				border-radius: 40rpx;
				line-height: 80rpx;
			}

			.sign {
				border: 1rpx solid #53B3D9;
				font-size: 30rpx;
				font-weight: 500;
				color: #53B3D9;
				background-color: #fff;
			}

			.notice {
				background-color: #53B3D9;
				font-size: 30rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
		}

		.bottom-box {
			button {
				width: 705rpx;
				height: 88rpx;
				background: #BEC3CF;
				border-radius: 44rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 88rpx;
			}
		}
	}
</style>
